<template>
  <div class='edit-profile'>
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" />
        <div class="info" >
          <div class="info-img">
            <van-uploader :after-read="afterRead" multiple>
              <van-image
                round
                fit="cover"
                width="2rem"
                height="2rem"
                :src="userInfo.avatar"
              />
            </van-uploader>
            <a class="info-click">点击更换头像</a>
          </div>
        </div>
        <div>
          <van-cell title="用户名" is-link :value="userInfo.nickname" />
          <van-cell class="jianjie" title="简介" is-link :value="userInfo.introduce ? userInfo.introduce : '待完善'" />
          <van-uploader :after-read="afterReadBg">
            <van-cell title="背景图" is-link :value="userInfo.background_image ? '去更换' : '去设置'" />
          </van-uploader>
          <van-cell title="性别" is-link :value="userInfo.gender ? userInfo.gender : '待完善'" @click="showPicker = true"/>
          <van-cell title="生日" is-link :value="userInfo.birthday ? userInfo.birthday : '待完善'" @click="showBirthday = true"/>
          <van-cell title="所在地" is-link :value="userInfo.city ? userInfo.city :'待完善'" @click="showCity=true"/>
          <van-cell title="学校" is-link :value="userInfo.school ? userInfo.school : '待完善'" @click="showSchool=true"/>
          <van-cell title="职业" is-link :value="userInfo.profession ? userInfo.profession : '待完善'" @click="showProfession = true"/>
        </div>
        <!-- 性别 -->
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <!-- 生日 -->
        <van-popup v-model="showBirthday" round position="bottom">
          <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="onBirthdayok"
          @cancel="showBirthday= false"
        />
        </van-popup>
        <!-- 城市 -->
        <van-popup v-model="showCity" round position="bottom">
          <van-picker show-toolbar :default-index="2" :columns="cityColumns" @change="onCityChange" @confirm="onCityok" />
        </van-popup>
        <!-- 学校 -->
        <van-popup v-model="showSchool" position="right" :style="{ height: '100%',width:'100%' }" >
          <van-nav-bar
            title="学校"
            right-text="提交"
            left-arrow
            @click-left="showSchool=false"
            @click-right="onSchool"
          />
          <div class="school">
            <van-field v-model="schoolValue" label="学校" placeholder="请输入学校名" input-align="right"/>
          </div>
        </van-popup>
        <!-- 职业 -->
        <van-popup v-model="showProfession" round position="bottom">
          <van-picker show-toolbar :default-index="2" :columns="ProfessionColumns" @change="onProfessionChange" @confirm="onProfessionOk" />
        </van-popup>
        <!-- 修改头像 -->
        <van-popup v-model="showAvatar" position="bottom"  class="update-photo-popup">
          <UpdatePhoto :file="file" @close="showAvatar=false" v-if="showAvatar" :type="'avatar'"/>
        </van-popup>
        <!-- 修改背景图 -->
        <van-popup v-model="showBackgroundImage" position="bottom"  class="update-photo-popup">
          <UpdatePhoto :file="file" @close="showBackgroundImage=false" v-if="showBackgroundImage" :type="'background_image'"/>
        </van-popup>
   </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { editUser } from '@/api/user'
import UpdatePhoto from '@/views/Setting/components/update-photo.vue'
// import { setItem } from "@/utils/storage";
const cities = {
  广东: ['广州', '深圳', '东莞', '佛山', '惠州'],
  湖南: ['长沙', '湘潭', '株洲', '郴州', '衡阳']
}
const Professions = {
  IT: ['java', 'web', 'php', 'Go', 'js'],
  特殊职业: ['保安', '保镖', '铲屎官']
}
export default {
  name: 'edit-profile',
  components: { UpdatePhoto },
  data () {
    return {
      gender: '',
      showPicker: false,
      showBirthday: false,
      showCity: false,
      showSchool: false,
      showProfession: false,
      showAvatar: false,
      showBackgroundImage: false,
      file: '',
      columns: ['男', '女'],
      minDate: new Date(1919, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      cityColumns: [{ values: Object.keys(cities) }, { values: cities['广东'] }],
      ProfessionColumns: [{ values: Object.keys(Professions) }, { values: Professions.IT }],
      schoolValue: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {},
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      this.file = file
      if (file) {
        this.showAvatar = true
        this.showBackgroundImage = true
      }
    },
    afterReadBg (file) {
      // 此时可以自行将文件上传至服务器
      this.file = file
      if (file) {
        this.showBackgroundImage = true
      }
    },
    // 编辑职业
    async onProfessionOk (val) {
      await editUser(this.userInfo.id, { profession: val[0] })
      this.showProfession = false
    },
    // 选择职业
    onProfessionChange (picker, values) {
      picker.setColumnValues(1, Professions[values[0]])
    },
    // 编辑学校
    async onSchool () {
      if (!this.schoolValue) return this.$toast('您未输入学校！')
      await editUser(this.userInfo.id, { school: this.schoolValue })
      this.showSchool = false
    },
    // 编辑城市
    async onCityok (values) {
      await editUser(this.userInfo.id, { city: values[1] })
      this.showCity = false
    },
    // 选择城市
    onCityChange (picker, values) {
      picker.setColumnValues(1, cities[values[0]])
    },
    formatter (type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    },
    // 编辑生日
    async onBirthdayok (value) {
      await editUser(this.userInfo.id, { birthday: value })
      this.showBirthday = false
    },
    // 编辑性别
    async onConfirm (gender) {
      this.gender = gender
      await editUser(this.userInfo.id, { gender: this.gender })
      this.showPicker = false
    }
  }
}
</script>
<style lang="scss" scoped>
.school{
  margin-top: 20px;
}
.update-photo-popup{
  background-color:#000;
  height: 100%;
}
::v-deep.van-uploader{
  width: 100%;
  .van-uploader__input-wrapper{
      width: 100%;
    }
}
.edit-profile {
  text-align: left;
}
.info{
  height: 270px;
  background-color: #f8f8f8;
}
.info-img{
  display:flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top:180px;
  left: 50%;
  transform: translate(-50%, -50%);
 a{
  font-size: 16px;
 }
}

.van-cell__value{
  // 文字一行显示 显示省略号
  white-space:nowrap;
  text-overflow:ellipsis;
}
</style>
